<!--
  功能：网卡绑定弹窗
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2023年08月12日 22:27:07
-->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="网卡详情" width="500px" class="y-modal" :footer="null" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span: 6 }" :wrapper-col="{span: 14}">
      <a-form-item label="名称">
        {{record?.interface || '未知'}}
      </a-form-item>
      <a-form-item label="启动时激活">
        {{record?.onboot ? '是' : '否'}}
      </a-form-item>
      <a-form-item label="最大传输单元MTU">
        <a-select v-model:value="record.mtu" disabled>
          <a-select-option value="">自动</a-select-option>
          <a-select-option value="1500">1500</a-select-option>
          <a-select-option value="9000">9000</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="IP设置">
        <a-select v-model:value="record.bootproto" disabled>
          <a-select-option value="dhcp">DHCP</a-select-option>
          <a-select-option value="static">指定IP</a-select-option>
          <a-select-option value="none">启动网口</a-select-option>
        </a-select>
      </a-form-item>
      <template v-if="record.bootproto == 'static'">
        <a-form-item label="IP地址">
          <a-input v-model:value="record.ipaddr" disabled/>
        </a-form-item>
        <a-form-item label="掩码">
          <a-input v-model:value="record.netmask" disabled/>
        </a-form-item>
        <a-form-item label="网关">
          <a-input v-model:value="record.gateway" disabled/>
        </a-form-item>
      </template>
    </a-form>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const { visible, record } = toRefs(props)
// 定义组件的事件
const emits = defineEmits(['update:visible'])

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}
</script>

<style scoped>
</style>